Skip to main content

Avatar

This component is used to display a user's profile picture.

To add the Avatar component to your project you can import it as follows:

import { Avatar } from '@amalgamaco/embassy-ui';

Example​

<Avatar
    size="md"
    source={{ uri: 'https://tinyurl.com/mrkdr42d' }}
/>

Props​

source​

The source of the image to display.

TypeRequired
ImageProps['source']Yes

size​

The size of the avatar.

TypeRequiredDefault
stringNo"md"

Available sizes:

SizeValue
"xs"40px
"sm"64px
"md"96px
"lg"128px
"xl"160px

alt​

The alternative text for the image. It will be used for the accessibility label of the image as {alt}'s avatar.

TypeRequired
stringNo
info

If you don't provide an alt prop, the accessibility label will be Avatar.

Pseudo Props​

__image​

Props to be to the internal Image component.

TypeRequired
IImagePropsNo
<Avatar
    size="xl"
    source={{ uri: 'https://tinyurl.com/mrkdr42d' }}
    __image={{
        borderWidth: 'xl',
        borderColor: 'success.500',
    }}
/>